import { useECharts } from '@/hooks/useECharts';
import { EChartsOption } from 'echarts';
import { useEffect } from 'react';
// ts
import type { BleedType } from '../typing';
interface BarChartProps {
  meterData: BleedType.StateType;
}

export const MeterChart = ({ meterData }: BarChartProps) => {
  const { chartRef: barRef, chartInstanceRef: barChart } = useECharts();
  // let { xAxisData, seriesData1, seriesData2 } = meterData;
  let { xAxisData, seriesData1 } = meterData;

  useEffect(() => {
    barChart.current?.setOption({
      // legend: {
      //   data: ['有功功率', '无功功率', '电量', '功率因素'],
      //   itemWidth: 7,
      //   itemHeight: 7,
      //   icon: 'circle',
      //   itemStyle: {
      //     // color: '#697682',
      //   },
      //   textStyle: {
      //     color: '#697682',
      //   },
      // },
      // grid: {
      //   x: 65, //图表左上角到左边界的距离
      //   y: 38, //图表左上角到上边界的距离
      //   x2: 65, //图表右下角到右边界的距离
      //   y2: 26, // 图表右下角到下边界的距离
      // },
      // tooltip: {
      //   trigger: 'axis', // 触发类型。
      //   backgroundColor: '#233346', // 背景色
      //   borderWidth: 0,
      //   axisPointer: {
      //     // 指示器类型。
      //     type: 'line',
      //     crossStyle: {
      //       color: '#fff', // 线的颜色。
      //     },
      //   },
      //   textStyle: {
      //     color: '#fff',
      //   },
      // },
      // xAxis: [
      //   {
      //     type: 'category',
      //     data: xAxisData,
      //     // boundaryGap: false, // false时从0刻度开始
      //     axisLine: {
      //       // 坐标轴轴线
      //       show: false,
      //     },
      //     axisTick: {
      //       // 坐标轴刻度
      //       show: false,
      //     },
      //     axisLabel: {
      //       // 坐标轴刻度标签的相关设置
      //       color: '#697682',
      //       fontSize: '.12rem',
      //       // rotate: 45, // 取值范围[-90, 90]
      //     },
      //     axisPointer: {
      //       type: 'shadow',
      //     },
      //   },
      // ],
      // yAxis: [
      //   //第一个Y轴
      //   {
      //     position: 'left',
      //     type: 'value', //轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'，
      //     name: '单位：kW',

      //     //坐标轴文本样式，nameTextStyle和axisLabel区别是，前者管坐标轴顶端文字（坐标轴标题），或者管轴上断点的文字标签
      //     nameTextStyle: {
      //       color: '#697682',
      //       formatter: '{value}',
      //     },
      //   },
      //   //第二个Y轴
      //   {
      //     position: 'right',
      //     type: 'value',
      //     name: '单位：kvar',

      //     nameTextStyle: {
      //       color: '#697682',
      //       formatter: '{value}',
      //     },
      //   },
      // ],
      // series: [
      //   {
      //     name: '有功功率',
      //     type: 'line',
      //     smooth: true,
      //     showSymbol: false,
      //     yAxisIndex: 0,
      //     tooltip: {
      //       valueFormatter: function (value) {
      //         return value as number;
      //       },
      //     },
      //     itemStyle: {
      //       color: '#FA5151',
      //     },
      //     lineStyle: {
      //       type: 'dotted',
      //     },
      //     data: seriesData1[1] && seriesData1[1].data,
      //   },
      //   {
      //     name: '无功功率',
      //     type: 'line',
      //     yAxisIndex: 0,
      //     smooth: true,
      //     showSymbol: false,
      //     tooltip: {
      //       valueFormatter: function (value) {
      //         return value as number;
      //       },
      //     },
      //     itemStyle: {
      //       color: '#71F0A2',
      //     },
      //     data: seriesData1[0] && seriesData1[0].data,
      //   },
      //   {
      //     name: '电量',
      //     type: 'line',
      //     yAxisIndex: 0,
      //     smooth: true,
      //     showSymbol: false,
      //     // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
      //     tooltip: {
      //       valueFormatter: function (value) {
      //         return value as number;
      //       },
      //     },
      //     itemStyle: {
      //       color: '#ffaa08',
      //     },
      //     lineStyle: {
      //       type: 'dotted',
      //     },
      //     data: seriesData2[1] && seriesData2[1].data,
      //   },
      //   {
      //     name: '功率因素',
      //     type: 'line',
      //     smooth: true,
      //     showSymbol: false,
      //     yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
      //     tooltip: {
      //       valueFormatter: function (value) {
      //         return value as number;
      //       },
      //     },
      //     itemStyle: {
      //       color: '#2FB3FF',
      //     },
      //     data: seriesData2[0] && seriesData2[0].data,
      //   },
      // ],
      animation: false,
      // backgroundColor: '#ffffff',
      // legend: {
      //   // data: ['总供应量', '黑鱼', '海鲈海鲈'],
      //   itemWidth: 7,
      //   itemHeight: 7,
      //   data: [
      //     {
      //       name: '电量',
      //     },
      //     {
      //       name: chartName0,
      //       icon: 'circle',
      //     },
      //     {
      //       name: chartName1,
      //       icon: 'circle',
      //     },
      //   ],
      //   itemStyle: {
      //     // color: '#697682',
      //   },
      //   textStyle: {
      //     color: '#697682',
      //     fontSize: '.15rem',
      //   },
      // },
      title: {
        text: '近30日电量消耗',
        left: '4%',
        top: '-4%',
        textStyle: {
          color: '#697682',
          fontSize: '.12rem',
          fontWeight: 'normal',
        },
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: '#233346', // 背景色
        borderWidth: 0,
        textStyle: {
          color: '#bed0db',
        },
        axisPointer: {
          // 指示器类型。
          type: 'line',
          crossStyle: {
            color: '#bed0db', // 线的颜色。
          },
        },
        
      },
      grid: {
        left: '0',
        right: '0',
        bottom: '0',
        top: '10%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: true,
        axisLine: {
          // 坐标轴轴线
          show: false,
        },
        axisTick: {
          // 坐标轴刻度
          show: false,
        },
        axisPointer: {
          type: 'shadow',
        },
        axisLabel: {
          // 坐标轴刻度标签的相关设置
          color: '#697682',
          fontSize: '.1rem',
          // rotate: 45, // 取值范围[-90, 90]
        },
        data: ['1日', '5日', '10日', '15日', '20日', '25日', '30日'],
      },
      yAxis: {
        type: 'value',
        name: '电量',
        nameTextStyle: {
          fontSize:'.1rem', // 设置字体大小为16
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.2)',
          },
        },
        axisLabel: {
          color: '#697682',
          fontSize: '.1rem',
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)',
          },
        },
      },
      series: [
        {
          name: '电量',
          type: 'bar',
          data: [820, 932, 601, 534, 490, 730, 910],
          barWidth: '6%',
          itemStyle: {
            // color: '#278AFF',
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: '#278AFF' }, // 0% 处的颜色
                { offset: 1, color: '#163152' }, // 100% 处的颜色
              ],
              global: false, // 缺省为 false
            },
          },
        },
        {
          name: '趋势',
          type: 'line',
          smooth: true,
          showSymbol: false,
          data: [820, 932, 601, 534, 490, 730, 910],
          tooltip: {
            valueFormatter: function (value) {
              return value as number;
            },
          },
          itemStyle: {
            // color: '#00B578',
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0.25, color: '#00B578' }, // 0% 处的颜色
                { offset: 0.5, color: '#3CFABA' }, // 50% 处的颜色
                { offset: 0.75, color: '#00B578' }, // 0% 处的颜色
                { offset: 1, color: '#00B578' }, // 100% 处的颜色
              ],
              global: false, // 缺省为 false
            },
          },
        },
      ],
    } as EChartsOption);
  }, [barChart, seriesData1, xAxisData]);

  return <div style={{ height: '100%' }} ref={barRef}></div>;
};
